<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>跟单数据</title>
</head>
<body>
<!--查询条件框-->
<form class="layui-form" action="" style="padding-top: 20px;" id="sdConForm">
</form>

<!--按钮框-->
<div class="layui-row">
    <div class="layui-col-xs12" id="sdBtnForm" style="margin-left: 40px;margin-bottom: 15px;">
    </div>
</div>

<!--列表-->
<table class="layui-hide" id="sdTable"></table>


<!-- 你的 HTML 代码 -->
<script>
    layui.use(['http', 'shopx', 'form', 'pub', 'table'], function () {
        var http = layui.http
            , shopx = layui.shopx
            , form = layui.form
            , pub = layui.pub
            , table = layui.table
            , $ = layui.$;

        var prefix = "sd";
        var elements = {
            name: prefix,
            controlName: 'cmSend',
            //表主键
            keyId:'cmsId',
            //页面元素前缀，按配置，施工等模块定义
            prefix: 'cm2',
            //page标题
            title: "跟单",
            //查询列表接口
            qryUrl: '/cmSend/queryPageList',
            //修改接口
            updUrl:'/cmSend/updateOne',
            //导出接口
            downloadUrl:'/cmSend/download',
            //查询条件
            conName: 'sdConForm',
            //按钮
            btnName: 'sdBtnForm',
            //表格id
            tableName: 'sdTable',
            //表主键
            keyId: 'cmsId',
            //排序
            orderBy: " start_dt desc",
            //默认初始化查询条件
            addModel: {
                // dictCode:"DEDUCTION_FLAG"
            },
            //查询条件 label#id#类型
            //注意：如果类型是dict 则用:分割 [0]是id [1]是dictCode,[2]是类型（t1：普通下拉框；t2:搜索下拉框；t3:多选搜索下拉框）
            //注意：如果类型是sel 则用:分割 [0]是id [1]是类型（t1：普通下拉框；t2:搜索下拉框；t3:多选搜索下拉框）
            conArray: [
                "客户姓名|cusName|TEXT",
                "施工状况|buildState|TEXT",
                "财务状况|financeState|TEXT",
                "材料员|materialName|TEXT",
                "开工日期|startBegDt:startEndDt:d2|RDT",
                "组织机构|orgId:t2|SEL",
            ],
            //按钮 id#名称#类型#图标#是否权限控制
            btnArray: [
                prefix + 'QueryBtn|查询|primary|&#xe615;|N',
                prefix+'ExpBtn|导出|normal|&#xe67d;|N'
            ],

            //表格列
            cols: [[
                {type: 'checkbox', fixed: 'left', width: 30, rowspan: 2}
                , {field: 'cmsId', title: '客户编码', fixed: 'left', width: 100, rowspan: 2}
                , {field: 'cusName', title: '姓名', sort: true, fixed: 'left', width: 100, rowspan: 2}
                , {field: 'cpName', title: '分公司', sort: true, fixed: 'left', width: 200, rowspan: 2}
                , {field: 'orgName', title: '店铺', sort: true, fixed: 'left', width: 200, rowspan: 2}
                , {field: 'sendRemark', width: 300, title: '备注', rowspan: 2, edit: 'text', fixed: 'left'}
                , {field: 'buildRatio', title: '收款比例', rowspan: 2, width: 150,sort: true, fixed: 'left'}
                , {field: 'buildAddress', width: 300, title: '地址', rowspan: 2}
                , {field: 'houseArea', title: '外框面积', width: 100, rowspan: 2}
                , {field: 'designerName', title: '设计师', width: 100, rowspan: 2}
                , {field: 'budgeterName', title: '预算员', width: 100, rowspan: 2}
                , {field: 'materialName', width: 100, title: '材料员', rowspan: 2}
                , {field: 'supervisor', title: '监理', width: 100, rowspan: 2}
                , {field: 'mngName', title: '项目经理/管家', width: 200, rowspan: 2}
                , {
                    field: 'signDt', title: '施工合同签订日期', width: 200, rowspan: 2, sort: true, templet: function (d) {
                        return pub.formatDtm(d.signDt);
                    }
                }
                , {
                    field: 'planDt', title: '计划完工日期', width: 200, rowspan: 2, sort: true, templet: function (d) {
                        return pub.formatDtm(d.planDt);
                    }
                }
                , {
                    field: 'startDt', title: '实际开工日期', width: 200, rowspan: 2, sort: true, templet: function (d) {
                        return pub.formatDtm(d.startDt);
                    }
                }
                , {
                    field: 'materialSubDt',
                    title: '选材单提交日期',
                    width: 200,
                    rowspan: 2,
                    sort: true,
                    templet: function (d) {
                        return pub.formatDtm(d.materialSubDt);
                    }
                }
                , {field: 'buildState', title: '施工状况', rowspan: 2, width: 150}
                , {field: 'financeState', title: '财务状况', rowspan: 2, width: 150}
                , {
                    field: 'firstPayDt', title: '交齐首付款日期', rowspan: 2, width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.firstPayDt);
                    }
                }
                , {
                    field: 'midPayDt', title: '交齐中期款日期', rowspan: 2, width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.midPayDt);
                    }
                }
                , {
                    field: 'bottomPayDt', title: '交齐尾款日期', rowspan: 2, width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.bottomPayDt);
                    }
                }
                , {
                    field: 'startPayDt', title: '交开工款日期', rowspan: 2, width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.startPayDt);
                    }
                }
                , {field: 'contractMoney', title: '合同金额', rowspan: 2, width: 150}
                , {field: 'payEngMoney', title: '已收工程款', rowspan: 2, width: 150}

                , {
                    title: "瓷砖",
                    colspan: 5,
                    align: 'center'
                }
                , {
                    title: "大理石",
                    colspan: 5,
                    align: 'center'
                }
                , {
                    title: "铝合金门",
                    colspan: 5,
                    align: 'center'
                }
                , {
                    title: "定制柜",
                    colspan: 5,
                    align: 'center'
                }
                , {
                    title: "橱柜",
                    colspan: 5,
                    align: 'center'
                }
                , {
                    title: "扣板",
                    colspan: 5,
                    align: 'center'
                }
                , {
                    title: "房门",
                    colspan: 5,
                    align: 'center'
                }
                , {
                    title: "卫浴",
                    colspan: 5,
                    align: 'center'
                }
                , {
                    title: "木地板",
                    colspan: 5,
                    align: 'center'
                }
                , {
                    title: "灯具",
                    colspan: 5,
                    align: 'center'
                }
                , {
                    title: "开关",
                    colspan: 5,
                    align: 'center'
                }
            ],
                [
                    {field: 'czSupplier', title: '瓷砖品牌', rowspan: 2, width: 150}
                    , {
                    field: 'czOrderDt', title: '瓷砖下单日期', rowspan: 2, width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.czOrderDt);
                    }
                }
                    , {
                    field: 'czSendDt', title: '瓷砖送货日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.czSendDt);
                    }
                }
                    , {
                    field: 'czInstallDt', title: '瓷砖安装日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.czInstallDt);
                    }
                }
                    , {
                     title: '瓷砖延期天数', width: 200, sort: true, templet: function (d) {
                        if (pub.isEmpty(d.czOrderDt)) {
                            return "<span style='background-color: #939393;color: #fff'>未开始</span>"
                        }
                        if (d.czDelayFlag =="延期") {
                            return "<span style='background-color: #cb0e16;color: #ffffff'>延期耗时" + d.czDelayDays + "天</span>";
                        } else {
                            return "<span style='background-color: #6bec3a;color: #000000'>耗时" + d.czDelayDays + "天</span>";
                        }
                    }
                }
                    , {field: 'dlsSupplier', title: '大理石品牌', width: 150}
                    , {
                    field: 'dlsOrderDt', title: '大理石下单日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.dlsOrderDt);
                    }
                }
                    , {
                    field: 'dlsSendDt', title: '大理石送货日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.dlsSendDt);
                    }
                }
                    , {
                    field: 'dlsInstallDt', title: '大理石安装日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.dlsInstallDt);
                    }
                }
                    , {
                     title: '大理石延期天数', width: 200, sort: true, templet: function (d) {
                        if (pub.isEmpty(d.dlsOrderDt)) {
                            return "<span style='background-color: #939393;color: #fff'>未开始</span>"
                        }
                        if (d.dlsDelayFlag =="延期") {
                            return "<span style='background-color: #cb0e16;color: #ffffff'>延期耗时" + d.dlsDelayDays + "天</span>";
                        } else {
                            return "<span style='background-color: #6bec3a;color: #000000'>耗时" + d.dlsDelayDays + "天</span>";
                        }
                    }
                }
                    , {field: 'lhjmSupplier', title: '铝合金门品牌', width: 150}
                    , {
                    field: 'lhjmOrderDt', title: '铝合金门下单日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.lhjmOrderDt);
                    }
                }
                    , {
                    field: 'lhjmSendDt', title: '铝合金门送货日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.lhjmSendDt);
                    }
                }
                    , {
                    field: 'lhjmInstallDt', title: '铝合金门安装日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.lhjmInstallDt);
                    }
                }
                    , {
                    title: '铝合金门延期天数', width: 200, sort: true, templet: function (d) {
                        if(pub.isEmpty(d.lhjmOrderDt)){
                            return "<span style='background-color: #939393;color: #fff'>未开始</span>"
                        }
                        if (d.lhjmDelayFlag =="延期") {
                            return "<span style='background-color: #cb0e16;color: #ffffff'>延期耗时" + d.lhjmDelayDays + "天</span>";
                        } else {
                            return "<span style='background-color: #6bec3a;color: #000000'>耗时" + d.lhjmDelayDays + "天</span>";
                        }
                    }
                }

                    , {field: 'dzgSupplier', title: '定制柜品牌', width: 150}
                    , {
                    field: 'dzgOrderDt', title: '定制柜下单日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.dzgOrderDt);
                    }
                }
                    , {
                    field: 'dzgSendDt', title: '定制柜送货日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.dzgSendDt);
                    }
                }
                    , {
                    field: 'dzgInstallDt', title: '定制柜安装日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.dzgInstallDt);
                    }
                }
                    , {
                    field: 'czOrderDt', title: '定制柜延期天数', width: 200, sort: true, templet: function (d) {
                        if(pub.isEmpty(d.dzgOrderDt)){
                            return "<span style='background-color: #939393;color: #fff'>未开始</span>"
                        }
                        if (d.dzgDelayFlag =="延期") {
                            return "<span style='background-color: #cb0e16;color: #ffffff'>延期耗时" + d.dzgDelayDays + "天</span>";
                        } else {
                            return "<span style='background-color: #6bec3a;color: #000000'>耗时" + d.dzgDelayDays + "天</span>";
                        }
                    }
                }

                    , {field: 'cgSupplier', title: '橱柜品牌', width: 150}
                    , {
                    field: 'cgOrderDt', title: '橱柜下单日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.cgOrderDt);
                    }
                }
                    , {
                    field: 'cgSendDt', title: '橱柜送货日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.cgSendDt);
                    }
                }
                    , {
                    field: 'cgInstallDt', title: '橱柜安装日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.cgInstallDt);
                    }
                }
                    , {
                    field: 'czOrderDt', title: '橱柜延期天数', width: 200, sort: true, templet: function (d) {
                        if(pub.isEmpty(d.cgOrderDt)){
                            return "<span style='background-color: #939393;color: #fff'>未开始</span>"
                        }
                        if (d.cgDelayFlag =="延期") {
                            return "<span style='background-color: #cb0e16;color: #ffffff'>延期耗时" + d.cgDelayDays + "天</span>";
                        } else {
                            return "<span style='background-color: #6bec3a;color: #000000'>耗时" + d.cgDelayDays + "天</span>";
                        }
                    }
                }
                    , {field: 'kbSupplier', title: '扣板品牌', width: 150}
                    , {
                    field: 'kbOrderDt', title: '扣板下单日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.kbOrderDt);
                    }
                }
                    , {
                    field: 'kbSendDt', title: '扣板送货日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.kbSendDt);
                    }
                }
                    , {
                    field: 'kbInstallDt', title: '扣板安装日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.kbInstallDt);
                    }
                }
                    , {
                    title: '扣板延期天数', width: 200, sort: true, templet: function (d) {
                        if(pub.isEmpty(d.kbOrderDt)){
                            return "<span style='background-color: #939393;color: #fff'>未开始</span>"
                        }
                        if (d.kbDelayFlag =="延期") {
                            return "<span style='background-color: #cb0e16;color: #ffffff'>延期耗时" + d.kbDelayDays + "天</span>";
                        } else {
                            return "<span style='background-color: #6bec3a;color: #000000'>耗时" + d.kbDelayDays + "天</span>";
                        }
                    }
                }
                    , {field: 'fmSupplier', title: '房门品牌', width: 150}
                    , {
                    field: 'fmOrderDt', title: '房门下单日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.fmOrderDt);
                    }
                }
                    , {
                    field: 'fmSendDt', title: '房门送货日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.fmSendDt);
                    }
                }
                    , {
                    field: 'fmInstallDt', title: '房门安装日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.fmInstallDt);
                    }
                }
                    , {
                    field: 'czOrderDt', title: '房门延期天数', width: 200, sort: true, templet: function (d) {
                        if(pub.isEmpty(d.fmOrderDt)){
                            return "<span style='background-color: #939393;color: #fff'>未开始</span>"
                        }
                        if (d.fmDelayFlag =="延期") {
                            return "<span style='background-color: #cb0e16;color: #ffffff'>延期耗时" + d.fmDelayDays + "天</span>";
                        } else {
                            return "<span style='background-color: #6bec3a;color: #000000'>耗时" + d.fmDelayDays + "天</span>";
                        }
                    }
                }

                    , {field: 'jjSupplier', title: '卫浴品牌', width: 150}
                    , {
                    field: 'jjOrderDt', title: '卫浴下单日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.jjOrderDt);
                    }
                }
                    , {
                    field: 'jjSendDt', title: '卫浴送货日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.jjSendDt);
                    }
                }
                    , {
                    field: 'jjInstallDt', title: '卫浴安装日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.jjInstallDt);
                    }
                }
                    , {
                    field: 'czOrderDt', title: '卫浴延期天数', width: 200, sort: true, templet: function (d) {
                        if(pub.isEmpty(d.jjOrderDt)){
                            return "<span style='background-color: #939393;color: #fff'>未开始</span>"
                        }
                        if (d.jjDelayFlag =="延期") {
                            return "<span style='background-color: #cb0e16;color: #ffffff'>延期耗时" + d.jjDelayDays + "天</span>";
                        } else {
                            return "<span style='background-color: #6bec3a;color: #000000'>耗时" + d.jjDelayDays + "天</span>";
                        }
                    }
                }
                    , {field: 'dbSupplier', title: '木地板品牌', width: 150}
                    , {
                    field: 'dbOrderDt', title: '木地板下单日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.dbOrderDt);
                    }
                }
                    , {
                    field: 'dbSendDt', title: '木地板送货日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.dbSendDt);
                    }
                }
                    , {
                    field: 'dbInstallDt', title: '木地板安装日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.dbInstallDt);
                    }
                }
                    , {
                    field: 'czOrderDt', title: '木地板延期天数', width: 200, sort: true, templet: function (d) {
                        if(pub.isEmpty(d.dbOrderDt)){
                            return "<span style='background-color: #939393;color: #fff'>未开始</span>"
                        }
                        if (d.dbDelayFlag =="延期") {
                            return "<span style='background-color: #cb0e16;color: #ffffff'>延期耗时" + d.dbDelayDays + "天</span>";
                        } else {
                            return "<span style='background-color: #6bec3a;color: #000000'>耗时" + d.dbDelayDays + "天</span>";
                        }
                    }
                }
                    , {field: 'djSupplier', title: '灯具品牌', width: 150}
                    , {
                    field: 'djOrderDt', title: '灯具下单日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.djOrderDt);
                    }
                }
                    , {
                    field: 'djSendDt', title: '灯具送货日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.djSendDt);
                    }
                }
                    , {
                    field: 'djInstallDt', title: '灯具安装日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.djInstallDt);
                    }
                }
                    , {
                    field: 'czOrderDt', title: '灯具延期天数', width: 200, sort: true, templet: function (d) {
                        if(pub.isEmpty(d.djOrderDt)){
                            return "<span style='background-color: #939393;color: #fff'>未开始</span>"
                        }
                        if (d.djDelayFlag =="延期") {
                            return "<span style='background-color: #cb0e16;color: #ffffff'>延期耗时" + d.djDelayDays + "天</span>";
                        } else {
                            return "<span style='background-color: #6bec3a;color: #000000'>耗时" + d.djDelayDays + "天</span>";
                        }
                    }
                }

                    , {field: 'kgSupplier', title: '开关品牌', width: 150}
                    , {
                    field: 'kgOrderDt', title: '开关下单日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.kgOrderDt);
                    }
                }
                    , {
                    field: 'kgSendDt', title: '开关送货日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.kgSendDt);
                    }
                }
                    , {
                    field: 'kgInstallDt', title: '开关安装日期', width: 200, sort: true, templet: function (d) {
                        return pub.formatDtm(d.kgInstallDt);
                    }
                }
                    , {
                    field: 'czOrderDt', title: '开关延期天数', width: 200, sort: true, templet: function (d) {
                        if(pub.isEmpty(d.kgOrderDt)){
                            return "<span style='background-color: #939393;color: #fff'>未开始</span>"
                        }
                        if (d.kgDelayFlag =="延期") {
                            return "<span style='background-color: #cb0e16;color: #ffffff'>延期耗时" + d.kgDelayDays + "天</span>";
                        } else {
                            return "<span style='background-color: #6bec3a;color: #000000'>耗时" + d.kgDelayDays + "天</span>";
                        }
                    }
                }





                ]
            ]
        }

        var page = shopx.genPage(elements);

        //展示菜单
        shopx.genCond(page);
        //展示按钮
        shopx.genBtn(page);
        //展示有权限的按钮
        shopx.eleAuthShow(http.getUserFunc());
        //展示form表单
        // shopx.genForm(page.formArray,"editFormDiv");


        //初始化分页查询 其中addModel是初始化查询条件
        http.initPage(page);
        // setTimeout(function(){
        //     var formSelects = layui.formSelects;
        //     formSelects.data('q_c1_roleCode', 'local', {
        //         arr: [
        //             {"name": "管理员", "value": 'admin1'},
        //             {"name": "预算员", "value": 'admin2'},
        //             {"name": "材料员", "value": 'admin3'},
        //             {"name": "财务", "value": 'admin4'},
        //         ]
        //     });
        // }, 1000);
        // form.render();
        // initQueryList();
        // form.render();
        //2、部门渲染
        layui.http.qryOrgList({},"q_cm2_orgId");
    });

    function initQueryList() {
        layui.http.postRequest("/cmStore/queryPageList", 'POST', {}, function suc(data) {
            layui.jquery("#q_cm2_cpId").html('<option value="">请选择</option>');
            // layui.jquery("#q_cm1_orgId").html('<option value="">请选择</option>');
            layui.each(data.rspData.data, function (index, item) {
                if (item.csFlag == "1") {
                    layui.jquery("#q_cm2_cpId").append('<option value="' + item.csId + '">' + item.csName + '</option>');
                }
                layui.form.on('select(q_cm2_cpId)', function (data2) {
                    var cpId = data2.value;
                    layui.jquery("#q_cm2_orgId").html('<option value="">请选择</option>');
                    layui.each(data.rspData.data, function (index, item) {
                        if (item.storeFlag == "1" && item.csId.indexOf(cpId) > -1) {
                            layui.jquery("#q_cm2_orgId").append('<option value="' + item.csId + '">' + item.csName + '</option>');
                        }
                    });
                    layui.form.render('select');
                });
            });


            layui.form.on('select(q_cm2_orgId)', function (data2) {
                var orgId = data2.value;
                var model = {
                    storeId: orgId
                }
                layui.http.postRequest("/cmMaterial/queryPageList", 'POST', model, function suc(data) {
                    layui.jquery("#q_cm2_materialId").html('<option value="">请选择</option>');
                    layui.each(data.rspData.data, function (index, item) {
                        layui.jquery("#q_cm2_materialId").append('<option value="' + item.userId + '">' + item.userName + '</option>');
                    });
                    layui.form.render('select');
                }, null, false, false);
            });

            layui.form.render();
        }, null, false, false);
    }

</script>
</body>
</html>